<template>
  <div id="liuliang_temp">
    <div class="toolbar">
      <el-form inline @submit.native.prevent>
        <el-form-item>
          <el-date-picker v-model="tableParam.date_time" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :clearable='false' />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="query();">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading='tableParam.loading'>
      <el-row :gutter="12">
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>总访问量</span>
            </div>
            <div>
              <el-badge is-dot>
                {{first.total}}
              </el-badge>
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>PC访问量</span>
            </div>
            <div style="width:100%">
              {{first.pc}}
              <el-progress :percentage="pcpercent" text-inside :stroke-width="17" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>移动端访问量</span>
            </div>
            <div style="width:100%">
              {{first.total-first.pc}}
              <el-progress :percentage="mobilepercent" text-inside :stroke-width="17" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>PC访问占比</span>
            </div>
            <div>
              <el-progress type="circle" :percentage="pcpercent" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>安卓占比</span>
            </div>
            <div>
              <el-progress type="circle" :percentage="androidpercent" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>IOS占比</span>
            </div>
            <div>
              <el-progress type="circle" :percentage="iospercent" />
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>日访问量统计</span>
            </div>
            <div style="width:100%;">
              <div ref='dayCharts' style="width:100%;height:320px;"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>小时访问量统计</span>
            </div>
            <div style="width:100%;">
              <div ref='hourCharts' style="width:100%;height:320px;"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>IP源分析</span>
            </div>
            <div style="width:100%;">
              <sample-table :data="records" :isloading='tableParam.tableLoading'>
                <sample-table-header slot="header">
                  <sample-table-header-column label="时间" :width="200" />
                  <sample-table-header-column label="IP" />
                  <sample-table-header-column label="来路" />
                </sample-table-header>
                <sample-table-body slot-scope="scope" :row="scope.row" :index="scope.index" slot="body">
                  <sample-table-body-column>
                    {{$common.ChangeDateFormat_hhmmss(scope.row.ZK_TIME, '-')}}
                  </sample-table-body-column>
                  <sample-table-body-column prop="ZK_IP" />
                  <sample-table-body-column>
                    <a :href="scope.row.ZK_REFERER" target="_blank">{{scope.row.ZK_REFERER}}</a>
                  </sample-table-body-column>
                </sample-table-body>
              </sample-table>
              <el-col :span="24" class="botton_toolbar">
                <el-pagination layout="prev, pager, next, jumper, total" :page-size="tableParam.pagesize" :current-page="tableParam.pageno" :total="tableParam.total" @current-change="currentChange" style="float:right;">
                </el-pagination>
              </el-col>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
const echarts = require('echarts');

export default {
  data() {
    let formDate = new Date();
    formDate = formDate.setDate(formDate.getDate() - 7);
    formDate = new Date(formDate);
    return {
      records: [],
      tableParam: {
        date_time: [formDate, new Date()],
        loading: false,
        tableLoading: false,
        pagesize: 100,
        pageno: 1,
        total: 0,
      },
      first: {
        total: 1,
        pc: 0,
        iphone: 0,
        android: 0,
      },
      second: [],
      third: [],
    };
  },
  computed: {
    pcpercent() {
      return Number.parseFloat(
        ((this.first.pc / this.first.total) * 100).toFixed(2),
      );
    },
    mobilepercent() {
      return Number.parseFloat((100.0 - this.pcpercent).toFixed(2));
    },
    iospercent() {
      return Number.parseFloat(
        ((this.first.iphone / this.first.total) * 100).toFixed(2),
      );
    },
    androidpercent() {
      return Number.parseFloat(
        (100.0 - this.pcpercent - this.iospercent).toFixed(2),
      );
    },
  },
  mounted() {
    this.query();
  },
  methods: {
    query() {
      this.tableParam.loading = true;
      this.tableParam.pageno = 1;
      this.$http
        .get('/api/liuliang/analysis', {
          params: {
            FROM: this.tableParam.date_time[0],
            TO: this.tableParam.date_time[1],
          },
        })
        .then(({ data: res }) => {
          this.tableParam.loading = false;
          this.first = { ...res.result.first[0] };
          this.second = res.result.second;
          this.third = res.result.third;
          this.setDayCharts();
          this.setHourCharts();
        })
        .catch(() => {
          this.tableParam.loading = false;
        });
      this.getIpHistory();
    },
    getIpHistory() {
      this.tableParam.tableLoading = true;
      let toDate = new Date(this.tableParam.date_time[1]);
      toDate = toDate.setDate(toDate.getDate() + 1);
      toDate = new Date(toDate);
      this.$http
        .get('/api/liuliang/history', {
          params: {
            PAGESIZE: this.tableParam.pagesize,
            PAGENO: this.tableParam.pageno,
            FROM: this.tableParam.date_time[0],
            TO: toDate, // 该接口后端不方便做日期加一，前端处理
          },
        })
        .then(({ data: res }) => {
          this.tableParam.tableLoading = false;
          if (res.flag === 'True') {
            this.tableParam.total = Number.parseInt(res.message, 10);
            this.records = res.result;
          }
        })
        .catch(() => {
          this.tableParam.tableLoading = false;
        });
    },
    currentChange(currentPage) {
      if (this.tableParam.pageno !== currentPage) {
        this.tableParam.pageno = currentPage;
        this.getIpHistory();
      }
    },
    setDayCharts() {
      const myChart = echarts.init(this.$refs.dayCharts);
      const xData = [];
      const yData = [];
      this.second.forEach(item => {
        xData.push(item.days);
        yData.push(item.total);
      });
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: yData,
            type: 'line',
          },
        ],
      });
    },
    setHourCharts() {
      const myChart = echarts.init(this.$refs.hourCharts);
      const xData = [];
      const yData = [];
      this.third.forEach(item => {
        xData.push(item.hours);
        yData.push(item.total);
      });
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: yData,
            label: {
              normal: {
                show: true,
                textBorderColor: '#333',
                textBorderWidth: 2,
              },
            },
            type: 'bar',
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
#liuliang_temp {
  .el-col {
    .el-card {
      margin-bottom: 12px;
      /deep/ .el-card__body {
        text-align: center;
        min-height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .botton_toolbar {
    margin-top: 20px;
  }
}
</style>
